import React, { Component } from 'react'
import { NavBar, Icon, Carousel, Toast } from "antd-mobile"
import axios from "axios"

import "./GoodDetail.css"
export default class goodDetail extends Component {
    constructor(props) {
        super(props)
        console.log(props)
    }
    state = {
        goodInfo: {},
        imgHeight: 250,
        showCollect: false
    }
    componentDidMount() {

        let { goods_id } = this.props.match.params
        axios.get("https://www.linweiqin.cn/api/public/v1/goods/detail", {
            params: {
                goods_id
            }
        }).then((res) => {
            this.setState({
                goodInfo: res.data.message
            })
        }).catch(err => {
            console.log(err)
        })

        let collections_str = localStorage.getItem("collections")
        let collections = JSON.parse(collections_str || '[]')
        let index = collections.findIndex(v => {
            if (v.goods_id === goods_id) {
                return true
            }
        })
        if (index != -1) {
            this.setState({
                showCollect: true
            })
        }
    }
    handlerCollect = (params) => {
        let collections_str = localStorage.getItem("collections")
        let collections = JSON.parse(collections_str || '[]')
        let index = collections.findIndex(v => {
            if (v.goods_id == this.state.goodInfo.goods_id) {
                return true
            }
        })
        if (index != -1) {
            collections.splice(index, 1)
            this.setState({ showCollect: false })
        } else {
            collections.push(this.state.goodInfo)
            this.setState({ showCollect: true })

        }
        localStorage.setItem("collections", JSON.stringify(collections))
    }
    gotoCart = (params) => {
        this.props.history.push("/cart")
    }
    addToCart = (params) => {
        let carts_str = localStorage.getItem("carts")
        let carts = JSON.parse(carts_str || "[]")
        let { goods_id } = this.props.match.params
        let index = carts.findIndex(v => {
            if (v.goods_id == goods_id) {
                return true
            }
        })
        if (index == -1) {
            let good_Info = this.state.goodInfo
            good_Info.num = 1
            good_Info.checked = true
            carts.push(good_Info)
        } else {
            carts[index].num++
        }
        Toast.info("加入购物车🛒成功")
        localStorage.setItem("carts", JSON.stringify(carts))
    }
    pay = (params) => {
        this.props.history.push("/pay")
    }

    render() {
        return (
            <div className="yg-detail">

                {/* NAV */}
                <NavBar
                    className="yg-detail-nav"
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                >商品详情</NavBar>

                {/* 轮播图 */}
                <div className="yg-detail-swiper">
                    <Carousel
                        infinite
                        autoplay={true}
                    >
                        {
                            this.state.goodInfo.pics && this.state.goodInfo.pics.map(v => {
                                return <div
                                    className="imageWrapper"
                                    key={v.goods_id}
                                    style={{ display: "inline-block", width: "100%", height: this.state.imgHeight }}
                                >
                                    <img
                                        src={v.pics_mid}
                                        style={{ width: "100%", verticalAlign: "top" }}
                                        onLoad={() => {
                                            window.dispatchEvent(new Event('resize'))
                                            this.setState({
                                                imgHeight: "auto"
                                            })
                                        }}
                                    />
                                </div>
                            })
                        }
                    </Carousel>
                </div>

                {/* 价格 */}
                <div className="yg-detail-price">
                    <div className="price-left">
                        <span className="title1">￥{this.state.goodInfo.goods_price}</span>

                    </div>
                    <div className="price-right">
                        <i className="iconfont icon-fenxiang"></i>
                        <i className={this.state.showCollect ? "iconfont icon-shoucang active" : "iconfont icon-shoucang"} onClick={this.handlerCollect}></i>
                    </div>
                </div>

                {/* 标题 */}
                <div className="yg-detail-title">
                    {this.state.goodInfo.goods_name}
                </div>

                {/* 图文详情 */}
                <div className="yg-detail-richtext">
                    <div className="richtext-title">图文详情</div>
                    <div className="richtext-content" dangerouslySetInnerHTML={{ __html: this.state.goodInfo.goods_introduce }}>

                    </div>
                </div>

                {/* 底部工具栏 */}
                <div className="yg-detail-bottom">
                    <div className="bottom-contact">
                        <i className="iconfont icon-lianxikefu"></i>
                        <div className="title">联系客服</div>
                    </div>
                    <div className="bottom-cart" onClick={this.gotoCart}>
                        <i className="iconfont icon-gouwuche"></i>
                        <div className="title">购物车</div>
                    </div>
                    <div className="bottom-addToCart" onClick={this.addToCart}>
                        <span className="title1">加入购物车</span>
                    </div>
                    <div className="bottom-buy" onClick={this.pay}>
                        <span className="title2">立即购买</span>
                    </div>
                </div>



            </div >
        )
    }
}
